<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流照片墙</title>
    <link rel="stylesheet" href="css/photoWall.css">
</head>
<body>
<h2 style="margin-left: 8px">照片管理</h2>
<div id="masonry" class="container-fluid"></div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/masonry.pkgd.min.js"></script>

<script>
    $(function () {
        var $container = $('#masonry');
        $.ajax({
            url: 'http://localhost:5656/getimages',
            type: 'POST',
            success: function (data) {
                var str = JSON.parse(data);
                console.log(str);
                for (var i = 0; i < str.length; i++) {
                    var ID = str[i].id;
                    if (str[i].u_class == 1) {
                        var Div1 = $('<div class="box"></div>');
                        var Div2 = $('<div class="del">删除</div>');
                        var imgObj = $("<img class='imgId' id=" + ID + ">").attr("src", "img/bgimg/" + str[i].u_path);

                        var oImg = $('#masonry')
                        Div2.appendTo(Div1)
                        imgObj.appendTo(Div1)
                        Div1.appendTo(oImg)
                    }
                }
            }
        }).then(function () {

        $container.masonry({
            columnWidth: 200,
            itemSelector: '.box',
            gutter: 8,
            isAnimated: true,
        });
        $(document).on("mouseover", ".box", function () {
            $(this).find("div").stop().show();
        })
        $(document).on("mouseout", ".box", function () {
            $(this).find("div").stop().hide();
        })
        $(document).on("click", ".del", function () {
            $(this).parent().remove();
            var $id = $(this).siblings().attr("id");
            console.log($id);
            $.ajax({
                url: 'http://localhost:5656/removeimg',
                type: 'POST',
                data: {
                    id: $id
                },
                success: function (data) {
                    console.log(data);
                }
            })


            var $container = $('#masonry');
            $container.masonry({
                itemSelector: '.box',
                gutter: 8,
                isAnimated: true,
            });
        })
        })

    })


</script>